<template>
	<notice :notice.sync="notice"></notice>
	<header-home show-file-class="true" @file-class-modal="showFileModal" :user.sync="user"></header-home>
	<div class="container-fluid" id="class-container">
        <div class="row">
            <div class="col-sm-3">
                <button class="btn btn-link add-class" id="add-class" data-toggle="modal" data-target="#add-class-modal">
                    <span class="glyphicon glyphicon-plus"></span> 创建班级
                </button>
            </div>
            <div class="col-sm-offset-6 col-sm-3 col-md-offset-7 col-md-2">
                <select class="form-control choose-course" v-model="filterId">
                    <option :value="-1">全部课程</option>
                	<option :value="course.cou_id" v-for="course in courses">{{course.cou_name}}</option>
                </select>
            </div>
        </div>
        <div class="loading" v-if="loading">
    		<i class="fa fa-spinner fa-spin fa-3x"></i>
    	</div>
        <div class="row" v-if="!loading">
            <template v-if="classes.length>0">
            	<div class="col-lg-3 col-md-6" v-for="item in classes" track-by="cla_id" v-show="filterId===-1||filterId==item.cou_id">
    	            <class-item :class-item="item"
    	            			:index="$index"
                                :is-teacher="user.isTeacher" 
    	            			@edit-class="editInit"
    	            			@file-class="file"
    	            			@del-class="delTry">
    	            </class-item>
    	        </div>
            </template>
            <div class="col-md-6 col-md-offset-3 display-hint class-hint" v-else>
                <p>点击上方创建班级按钮创建一个班级</p>
            </div>
        </div>
    </div>
    <modal id="add-class-modal">
    	<h4 class="modal-title" slot="header">添加班级</h4>
    	<validator name="create" slot="body">
    	<form class="form-horizontal" >
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">课程名称</label>
    	        <div class="col-sm-6">
    	            <input type="text" class="form-control" id="class_name" placeholder="请输入班级名称" v-model="newClass.cla_name"
    	            	detect-change="off"
    	            	v-validate:name="{
							required: {rule: true, message: '请输入班级名称'}
    	        		}">
    	        </div>
    	    </div>
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">选择课程</label>
    	        <div class="col-sm-6">
    	            <select class="form-control" v-model="newClass.cou_id"
    	            	v-validate:course="{
							checkCourse: {rule: true, message: '请选择课程'}
    	        		}">
    	            	<option value="-1" checked>选择课程</option>
    	                <option v-for="item in courses" :value="item.cou_id">{{item.cou_name}}</option>
    	            </select>
    	        </div>
    	    </div>
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">开课时间</label>
    	        <div class="col-sm-6">
    	            <input type="date" class="form-control"  id="start_time" required v-model="newClass.cla_start"
	    	            v-validate:start="{
							required: {rule: true, message: '请选择课程开始时间'}
	    	        	}"/>
    	        </div>
    	    </div>
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">结束时间</label>
    	        <div class="col-sm-6">
    	            <input type="date" class="form-control"  id="end_time" required v-model="newClass.cla_end"
    	            	v-validate:end="{
							required: {rule: true, message: '请选择课程结束时间'},
							checkTime: {rule: newClass.cla_start, message: '开始时间不能晚于结束时间'}
    	        		}"/>
    	        </div>
    	    </div>
    	    <div class="form-group" id="addClass-auto">
    	        <label class="col-sm-2 control-label">审核方式</label>
    	        <div class="col-sm-6">
    	            <label class="radio-inline">
    	                <input type="radio" name="auto" value="0" v-model="newClass.is_auto"/>手动审批
    	            </label>
    	            <label class="radio-inline">
    	                <input type="radio" name="auto" value="1" v-model="newClass.is_auto"/>自动审批
    	            </label>
    	        </div>
    	    </div>
    	</form>
    	</validator>
    	<button type="button" class="btn btn-primary" @click="create" slot="footer">确定</button>
    </modal>
    <modal id="edit-class-modal">
    	<h4 class="modal-title" slot="header">编辑班级</h4>
    	<validator name="edit" slot="body">
    	<form class="form-horizontal" >
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">课程名称</label>
    	        <div class="col-sm-6">
    	            <input type="text" class="form-control" id="class_name" placeholder="请输入班级名称" v-model="editClass.cla_name"
    	            	v-validate:name="{
							required: {rule: true, message: '请输入班级名称'}
    	        		}">
    	        </div>
    	    </div>
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">选择课程</label>
    	        <div class="col-sm-6">
    	            <select class="form-control" v-model="editClass.cou_id"
    	            	v-validate:course="{
							checkCourse: {rule: true, message: '请选择课程'}
    	        		}">
    	            	<option value="-1" checked>选择课程</option>
    	                <option v-for="item in courses" :value="item.cou_id">{{item.cou_name}}</option>
    	            </select>
    	        </div>
    	    </div>
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">开课时间</label>
    	        <div class="col-sm-6">
    	            <input type="date" class="form-control"  id="start_time" required v-model="editClass.cla_start"
	    	            v-validate:start="{
							required: {rule: true, message: '请选择课程开始时间'}
	    	        	}"/>
    	        </div>
    	    </div>
    	    <div class="form-group">
    	        <label class="col-sm-2 control-label">结束时间</label>
    	        <div class="col-sm-6">
    	            <input type="date" class="form-control"  id="end_time" required v-model="editClass.cla_end"
    	            	v-validate:end="{
							required: {rule: true, message: '请选择课程结束时间'},
							checkTime: {rule: editClass.cla_start, message: '开始时间不能晚于结束时间'}
    	        		}"/>
    	        </div>
    	    </div>
    	    <div class="form-group" id="addClass-auto">
    	        <label class="col-sm-2 control-label">审核方式</label>
    	        <div class="col-sm-6">
    	            <label class="radio-inline">
    	                <input type="radio" name="auto" value="0" v-model="editClass.is_auto"/>手动审批
    	            </label>
    	            <label class="radio-inline">
    	                <input type="radio" name="auto" value="1" v-model="editClass.is_auto"/>自动审批
    	            </label>
    	        </div>
    	    </div>
    	</form>
    	</validator>
    	<button type="button" class="btn btn-primary" @click="edit" slot="footer">确定</button>
    </modal>
    <modal type="modal-sm" id="del-class-modal" class="del-class-modal">
    	<h4 class="modal-title text-danger" slot="header">删除班级</h4>
    	<p slot="body">是否删除班级</p>
    	<button slot="footer" type="button" class="btn btn-danger" @click="delClass">删除</button>
    </modal>
    <modal id="file-manage-modal" type="modal-lg" class="file-class-modal">
        <h4 class="modal-title" slot="header">归档管理</h4>
        <template slot="body">
            <div class="row">
                <div class="col-md-3 col-md-offset-9">
                    <select class="form-control choose-course" v-model="fileFilterId">
                        <option :value="-1">全部课程</option>
                        <option :value="course.cou_id" v-for="course in courses">{{course.cou_name}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 class-panel" v-for="item in filedClasses" v-show="fileFilterId==-1 || item.cou_id==fileFilterId">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title"><a :href="'/Students/students.html?cad='+item.cla_id">{{item.cla_name}} - {{item.cou_name}}</a></h1>
                            <div class="dropdown pull-right">
                                <a class="class-edit dropdown-toggle" href="javascript:;" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="javascript:;" class="menu-class-renew" @click="renew($index)">恢复</a></li>
                                    <li><a href="javascript:;" class="menu-class-delete" @click="delTry($index, 'file')">删除</a></li>
                                </ul>
                            </div>
                            <p><small>开始:{{item.cla_start}} 结束:{{item.cla_end}}</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </modal>
</template>

<script>
	import HeaderHome from '../../Component/HeaderHome/HeaderHome';
	import Modal from '../../Component/Modal/Modal';
	import Notice from '../../Component/Notice/Notice';
	import ClassItem from '../../Component/ClassItem/ClassItem';

	export default {
		created: function() {
			this.$http.get('/Course/getEnableCourse').then(function(resp) {
	            if (resp.data.status === 1) {
	                this.courses = resp.data.data;
	            } else {
	                this.notice = {type: 0, msg: resp.data.message};
	            }
		    }, function(resp) {
		        // error callback
		        this.notice = {type: 0, msg: resp.statusText};
		    })
		    this.$http.get('/Class/Classes').then(function(resp) {
	            if (resp.data.status === 1) {
	                this.classes = resp.data.data;
	            }
	            this.loading = false;
		    }, function(resp) {
		        // error callback
		        this.notice = {type: 0, msg: resp.statusText};
		        this.loading = false;
		    })
		},
		data() {
			return {
				notice: {type: 0, msg: ''},
                user: {},
				courses: [],
				classes: [],
                filedClasses: [],
				loading: true,
                filedLoading: true,
				filterId: -1,
                fileFilterId: -1,
				newClass: {cou_id: '-1', is_auto: '0'},
				delIndex: '',
				editClass: {},
                delType: ''
			}
		},
		components: {
			HeaderHome,
			Modal,
			Notice,
			ClassItem
		},
		methods: {
			create: function() {
				if (!this.$create.errors) {
                    this.$http.post('/Class/add', this.newClass).then(function(resp) {
                        if (resp.data.status === 1) {
                        	this.newClass.cla_id = resp.data.data.id;
                            this.newClass.cou_name = resp.data.data.cou_name;
                        	this.classes.splice(0, 0, this.newClass);
                            this.notice = {type: 1, msg: resp.data.message};
                            this.newClass = {cou_id: '-1', is_auto: '0'};
                            $("#add-class-modal").modal("toggle");
                        } else {
                        	this.notice = {type: 0, msg: resp.data.message};
                        }
            	    }, function(resp) {
            	        // error callback
            	        this.notice = {type: 0, msg: resp.statusText};
            	    })
                } else {
                    this.notice = {type: 0,msg: this.$create.errors[0].message};
                }
			},
			editInit: function(index) {
				this.editClass = Object.assign({}, this.classes[index]);
				this.editClass.index = index;
                console.log(this.editClass)
			},
			edit: function() {
				var edit = this.editClass;
                this.$resetValidation();
				if (!this.$edit.errors) {
                    this.$http.post('/Class/update', {
                    	cla_id: edit.cla_id,
                    	cla_name: edit.cla_name,
                    	cla_start: edit.cla_start,
                    	cla_end: edit.cla_end,
                    	is_auto: edit.is_auto
                    }).then(function(resp) {
                        if (resp.data.status === 1) {
                            this.notice = {type: 1, msg: resp.data.message};
                            this.classes.$set(this.edit.index, edit);
                            $("#edit-class-modal").modal("toggle");
                        } else {
                        	this.notice = {type: 0, msg: resp.data.message};
                        }
            	    }, function(resp) {
            	        // error callback
            	        this.notice = {type: 0, msg: resp.statusText};
            	    })
                } else {
                    this.notice = {type: 0,msg: this.$edit.errors[0].message};
                }
			},
			file: function(index) {
				this.$http.post('/Class/filed',
		        	{cla_id: this.classes[index].cla_id}).then(function(resp) {
		            if (resp.data.status === 1) {
		            	this.classes.splice(this.index, 1);
		                this.notice = {type: 1, msg: resp.data.message};
		            } else {
		            	this.notice = {type: 0, msg: resp.data.message};
		            }
			    }, function(resp) {
			        // error callback
			        this.notice = {type: 0, msg: resp.statusText};
			    })
			},
			delTry: function(index, type) {
                var cla_id = type === 'file'? this.filedClasses[index].cla_id : this.classes[index].cla_id;
                this.delType = type;
		        this.$http.post('/Class/check_delete',
		        	{cla_id: cla_id}).then(function(resp) {
		            if (resp.data.status === 1) {
		                this.delIndex = index;
		                $("#del-class-modal").modal("toggle");
		            } else {
		            	this.notice = {type: 0, msg: resp.data.message};
		            }
			    }, function(resp) {
			        // error callback
			        this.notice = {type: 0, msg: resp.statusText};
			    })
			},
			delClass: function() {
                var cla_id = this.delType === 'file'? this.filedClasses[this.delIndex].cla_id : this.classes[this.delIndex].cla_id;
				this.$http.post('/Class/delete',
		        	{cla_id: cla_id}).then(function(resp) {
		            if (resp.data.status === 1) {
		                this.notice = {type: 1, msg: resp.data.message};
                        if (this.delType === 'file')
                            this.filedClasses.splice(this.delIndex, 1);
                        else
		                    this.classes.splice(this.delIndex, 1);
		                $("#del-class-modal").modal("toggle");
		            } else {
		            	this.notice = {type: 0, msg: resp.data.message};
		            }
			    }, function(resp) {
			        // error callback
			        this.notice = {type: 0, msg: resp.statusText};
			    })
			},
            showFileModal: function() {
                if (this.loading) {
                    return;
                } 
                this.filedLoading = true;
                    this.$http.get('/Class/filedClass').then(function(resp) {
                    if (resp.data.status === 1) {
                        this.filedClasses = resp.data.data;
                    }
                    this.loading = false;
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                    this.loading = false;
                })
            },
            renew: function(index) {
                this.$http.post('/Class/renew',
                    {cla_id: this.filedClasses[index].cla_id}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.notice = {type: 1, msg: resp.data.message};
                        this.classes.unshift(this.filedClasses[index]);
                        this.filedClasses.splice(index, 1);
                        $("#file-manage-modal").modal("toggle");
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            }
		},
		validators: {
			checkCourse: function(val) {
				return val !== '-1';
			},
			checkTime: function(val, target) {
				return val > target;
			}
		}
	}
</script>

<style>
#class-container {
	margin: 0 100px 0 40px;
}

#class-container .row {
	margin-bottom: 10px
}

button#add-class {
	color: #515151;
	font-size: 16px
}

button#add-class:hover {
	opacity: 0.6;
	text-decoration: none;
}

button#add-class:focus {
	outline: 0;
	text-decoration: none;
}

.file-class-modal .panel .panel-title {
    display:inline-block; 
    margin-bottom:10px;
    font-size:18px;
    width: auto;
}

.file-class-modal .modal-body {
    height:300px;
    overflow-y: auto;
    padding: 10px 60px 40px 60px;
}

.file-class-modal .row {
    margin-top: 10px;
}
.del-class-modal {
    z-index: 1099;
}
</style>